<template>
    <div>
        <!--  -->
        <van-nav-bar class="app-1" title="限时秒杀" left-text="" left-arrow @click-left="index()" />
        <div class="miao-1"><span>每天12点准时开始</span></div>
        <div class="miao-2">
            <van-tabs type="line" style="width: 100%; height: 80px">
                <van-tab :title='title1'>
                    <!-- 产品 -->
                    <div class="my-goods-item" v-for="str in list" :key="str.id">
                        <div class="left">
                            <div class="custom-control custom-checkbox">
                                <label class="custom-control-label">
                                    <img :src="str.proimg" alt="" />
                                </label>
                            </div>
                        </div>
                        <div class="right">
                            <div class="top">{{ str.proname }}</div>
                            <div class="aaa"><span class="span">秒杀</span></div>
                            <div class="bottom1">
                                <span class="price">¥{{ str.price}}</span>
                            </div>
                        </div>
                        <div class="li" @click="fukuan(str)" style="font-size:10px; top: 10px;">立即抢购</div>
                        <div class="sheng">已售：{{ str.productcount }}</div>
                    </div>
                </van-tab>
                <van-tab :title="title2">
                    <!-- 产品 -->
                    <div class="my-goods-item" v-for="str in list1" :key="str.id">
                        <div class="left">
                            <div class="custom-control custom-checkbox">
                                <label class="custom-control-label">
                                    <img :src="str.proimg" alt="" />
                                </label>
                            </div>
                        </div>
                        <div class="right">
                            <div class="top">{{ str.proname }}</div>
                            <div class="bottom1">
                                <span class="price">¥{{ str.price}}</span>
                            </div>
                        </div>
                        <div class="li" @click="fukuan(str)" style="font-size:10px">立即抢购</div>
                        <div class="sheng">已售：{{ str.productcount }}</div>
                    </div>
                </van-tab>
                <van-tab :title='title3'>
                    <!-- 产品 -->
                    <div class="my-goods-item" v-for="str in list2" :key="str.id">
                        <div class="left">
                            <div class="custom-control custom-checkbox">
                                <label class="custom-control-label">
                                    <img :src="str.proimg" alt="" />
                                </label>
                            </div>
                        </div>
                        <div class="right">
                            <div class="top">{{ str.proname }}</div>
                            <div class="bottom1">
                                <span class="price">¥{{ str.price}}</span>
                            </div>
                        </div>
                        <div class="li" @click="fukuan(str)" style="font-size:10px">立即抢购</div>
                        <div class="sheng">已售：{{ str.productcount }}</div>
                    </div>
                </van-tab>
                <van-tab :title='title4'>
                    <!-- 产品 -->
                    <div class="my-goods-item" v-for="str in list3" :key="str.id">
                        <div class="left">
                            <div class="custom-control custom-checkbox">
                                <label class="custom-control-label">
                                    <img :src="str.proimg" alt="" />
                                </label>
                            </div>
                        </div>
                        <div class="right">
                            <div class="top">{{ str.proname }}</div>
                            <div class="bottom1">
                                <span class="price">¥{{ str.price}}</span>
                            </div>
                        </div>
                        <div class="li" @click="fukuan(str)">立即抢购</div>
                        <div class="sheng">已售：{{ str.productcount }}</div>
                    </div>
                </van-tab>
            </van-tabs>
            <!-- <div
        class="miao-2-1"
        @click="select(background)"
        :style="{ background: redcolor, color: fontcolor }"
      >
        <b style="font-size: 30px">12:00</b>
        <br />
        <span style="font-size: 15px">抢购中</span>
      </div>
      <div
        class="miao-2-2"
        @click="select1()"
        :style="{ background: redcolor1, color: fontcolor1 }"
      >
        <b style="font-size: 30px">12:00</b>
        <br />
        <span style="font-size: 15px">12月11日</span>
      </div>
      <div
        class="miao-2-3"
        @click="select2()"
        :style="{ background: redcolor2, color: fontcolor2 }"
      >
        <b style="font-size: 30px">12:00</b>
        <br />
        <span style="font-size: 15px">12月12日</span>
      </div>
      <div
        class="miao-2-4"
        @click="select3()"
        :style="{ background: redcolor3, color: fontcolor3 }"
      >
        <b style="font-size: 30px">12:00</b>
        <br />
        <span style="font-size: 15px">12月13日</span>
      </div> -->
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            title1: '',
            title2: '',
            title3: '',
            title4: '',
            list: "",
            list1: "",
            list2: "",
            list3: ""

        };
    },
    created() {
        this.todate();
        this.miaosha(this.title1);
        this.miaosha1(this.title1);
        this.miaosha2(this.title1);
        this.miaosha3(this.title1);
    },
    methods: {
        miaosha(title) {
            var data = new Date();
            var month = data.getMonth() < 9 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1;
            var date = data.getDate() <= 9 ? "0" + data.getDate() : data.getDate();
            // this.addForm.enter_date = data.getFullYear() + "-" + month + "-" + date;
            // // console.log(this.addForm.enter_date)
            var aaa = data.getFullYear() + "-" + title;
            var bbb = aaa.substring(5);
            axios({
                url: "/api/second/findSec",  //?startDate
                method: "GET",
                params: {
                    startDate: aaa,
                }
            }).then((res) => {
                this.list = res.data
                console.log(this.list);
            });
        },
        miaosha1(title2) {
            var data = new Date();
            var month = data.getMonth() < 9 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1;
            var date = data.getDate() <= 9 ? "0" + data.getDate() : data.getDate();
            // this.addForm.enter_date = data.getFullYear() + "-" + month + "-" + date;
            // // console.log(this.addForm.enter_date)
            var aaa = data.getFullYear() + "-" + this.title2;
            axios({
                url: "/api/second/findSec",  //?startDate
                method: "GET",
                params: {
                    startDate: aaa,
                }
            }).then((res) => {
                this.list1 = res.data
                console.log(this.list);
            });
        },
        miaosha2() {
            var data = new Date();
            var month = data.getMonth() < 9 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1;
            var date = data.getDate() <= 9 ? "0" + data.getDate() : data.getDate();
            // this.addForm.enter_date = data.getFullYear() + "-" + month + "-" + date;
            // // console.log(this.addForm.enter_date)
            var aaa = data.getFullYear() + "-" + this.title3;
            axios({
                url: "/api/second/findSec",  //?startDate
                method: "GET",
                params: {
                    startDate: aaa,
                }
            }).then((res) => {
                this.list2 = res.data
                console.log(this.list);
            });
        },
        miaosha3() {
            var data = new Date();
            var month = data.getMonth() < 9 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1;
            var date = data.getDate() <= 9 ? "0" + data.getDate() : data.getDate();
            // this.addForm.enter_date = data.getFullYear() + "-" + month + "-" + date;
            // // console.log(this.addForm.enter_date)
            var aaa = data.getFullYear() + "-" + this.title4;
            axios({
                url: "/api/second/findSec",  //?startDate
                method: "GET",
                params: {
                    startDate: aaa,
                }
            }).then((res) => {
                this.list3 = res.data
                console.log(this.list);
            });
        },
        // 跳转首页
        index() {
            this.$router.push({ path: "/index"});
        },

        // 跳转购物车
        fukuan(str) {
            this.$router.push({ path: "/fukuan" ,query:{str:str}});
        },

        convertToDate(date) {
            var date = new Date(date);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            var d = date.getDate();
            m = m < 10 ? "0" + m : m; //月小于10，加0
            d = d < 10 ? "0" + d : d; //day小于10，加0
            return m + "-" + d + ""
            // return y + "-" + m + "-" + d;
        },

        todate() {
            var data = new Date();
            var month = data.getMonth() < 9 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1;
            var date = data.getDate() <= 9 ? "0" + data.getDate() : data.getDate();
            //  this.addForm.enter_date = data.getFullYear() + "-" + month + "-" + date;
            // // console.log(this.addForm.enter_date)
            var aaa = data.getFullYear() + "-" + month + "-" + date + "";
            var bbb = aaa.substring(5);
            this.title1 = bbb;
            let aftereDay = new Date(
                new Date().getTime() + 24 * 60 * 60 * 1000
            ); //计算当前日期 -1
            this.title2 = this.convertToDate(aftereDay); //格式化日期并赋值
            let aftereDay2 = new Date(
                new Date().getTime() + 24 * 60 * 60 * 1000 * 2
            ); //计算当前日期 -1
            this.title3 = this.convertToDate(aftereDay2); //格式化日期并赋值
            let aftereDay3 = new Date(
                new Date().getTime() + 24 * 60 * 60 * 1000 * 3
            ); //计算当前日期 -1
            this.title4 = this.convertToDate(aftereDay3); //格式化日期并赋值



        },
        // select() {

        //     this.redcolor = "#df443b";
        //     this.fontcolor = "#fff";

        // },
        // select1() {
        //   this.redcolor1 = "#df443b";
        //   this.fontcolor1 = "#fff";
        // },
        // select2() {
        //   this.redcolor2 = "#df443b";
        //   this.fontcolor2 = "#fff";
        // },
        // select3() {
        //   this.redcolor3 = "#df443b";
        //   this.fontcolor3 = "#fff";
        // },
    },
};
</script>

<style  lang="less" scoped>
.li {
    width: 20%;
    height: 30px;
    border-radius: 40px;
    float: right;
    background-color: #df656f;
    margin-top: 8%;
    text-align: center;
    color: #fff;
    line-height: 30px;
    margin-right: -15%;
    font-size: 15px;
}
.sheng {
    width: 15%;
    height: 30px;
    margin-top: 15%;
    float: right;
    margin-right: 3%;
    font-size: 10px;
}
.miao-3-1 {
    width: 100%;
}
.active {
    color: red;
}
// .miao-2-1 {
//   width: 29%;
//   height: 80px;
//   /* background-color: aqua; */
//   float: left;
// }
// .miao-2-2 {
//   width: 29%;
//   height: 80px;
//   /* background-color: aqua; */
//   float: left;
// }
// .miao-2-3 {
//   width: 29%;
//   height: 80px;
//   /* background-color: aqua; */
//   float: left;
// }
// .miao-2-4 {
//   width: 29%;
//   height: 80px;
//   /* background-color: aqua; */
//   float: left;
// }
.miao-2 {
    width: 100%;
    height: 100%;
    float: left;
    background-color: #ffffff;
    text-align: center;
    //   border-bottom: 15px solid #f4f4f4;
    /* color: #333333; */
    font-size: 20px;
    line-height: 40px;
    display: flex;
}
.miao-1 {
    width: 100%;
    height: 65px;
    float: left;
    text-align: center;
    color: #333333;
    font-size: 26px;
    line-height: 70px;
}

/* c */
.delete-button {
    height: 100%;
}
.my-goods-item {
    padding: 15px;
    /* 容器设为弹性布局 */
    display: flex;
    border-bottom: 1px solid #ccc;

    .left {
        img {
            border-radius: 10px;
            background-color: #fff;
            margin-right: 8px;
            width: 100px;
            height: 100px;
        }
        .custom-control-label::before,
        .custom-control-label::after {
            top: 50px;
        }
    }
    .right {
        flex: 1;
        display: flex;

        justify-content: space-between;
        //  设置主轴垂直方向
        flex-direction: column;
        .top {
            font-size: 14px;
            // 字体变黑加粗
            font-weight: 700;
        }
        .bottom1 {
            justify-content: space-between;
            padding: 5px 0;
            align-items: center;
            width: 100px;
            .price {
                color: #df656f;
                font-weight: bold;
                margin-left: -15px;
            }
        }
    }
}
.aaa {
    width: 30px;
    height: 15px;
    margin-left: 15px;
    border: 1px solid #df656f;
    border-radius: 2px;
}
.span {
    float: left;
    margin-top: -10px;
    font-size: 12px;
    margin-left: 3px;
    color: #e87d6f;
}
</style>